<template>
  <canvas ref="canvas" class="absolute" />
</template>

<script setup lang="ts">
import { AcrossCanvas } from '@/common/draw/AcrossCanvas'
import { ref, watch } from 'vue'

const canvas = ref<HTMLCanvasElement>()
const { width, height, startY, margin, lstAcrossConfig } = defineProps<{
  width: number
  height: number
  startY: number
  margin: number
  lstAcrossConfig: AcrossConfig[]
}>()

watch(
  () => width || height || startY || margin || lstAcrossConfig,
  async () => {
    const ctx = canvas.value?.getContext('2d')!
    new AcrossCanvas(canvas.value!, ctx, width, height, startY, margin, lstAcrossConfig).draw()
  },
)
</script>
